<template>
	<div>
		<el-menu
			:default-active="this.$route.path"
			mode="horizontal"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b"
			:router="true"
		>
			<el-menu-item index="">
				<img src="../assets/logo.png" height="24" />
			</el-menu-item>
			<el-menu-item index="/dashboard" class="el-icon-orange">
				仪表板
			</el-menu-item>
			<el-menu-item index="/customer/create" class="el-icon-circle-plus">
				录入客户信息
			</el-menu-item>
			<el-menu-item index="/customer/list" class="el-icon-reading">
				查看客户信息
			</el-menu-item>
			<el-menu-item
				index="/user/manage"
				class="el-icon-apple"
				v-if="this.$store.state.currentUser.role === 'USERMANAGER'"
			>
				用户管理
			</el-menu-item>
			<el-submenu index="" style="float: right">
				<template slot="title">
					<i class="el-icon-user"></i>
					欢迎您，【{{ this.$store.state.currentUser.username }}】
				</template>
				<el-menu-item index="/user/pwd">修改密码</el-menu-item>
				<el-menu-item @click="handleLogout">注销</el-menu-item>
			</el-submenu>
		</el-menu>
		<el-main>
			<router-view></router-view>
		</el-main>
	</div>
</template>

<script>
export default {
	methods: {
		// 注销
		handleLogout() {
			// 清除浏览器会话存储中持久存储的CURRENT_USER
			sessionStorage.removeItem("CURRENT_USER");
			// 清除Vuex全局状态中的currentUser
			this.$store.commit("setCurrentUser", {});
			this.$router.push("/");
		},
	},
};
</script>

<style scoped></style>
